<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>欢迎登陆</title>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" href="../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="../admin/images/background2.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="../admin/images/logo.png"/>
        <div class="title">实验室管理系统</div>
        <div class="desc">
            欢 迎 登 陆
        </div>
    </div>
    <div class="layui-form-item">
        <input placeholder="账 户 :  " hover class="layui-input" id="username" autocomplete="off"/>
    </div>
    <div class="layui-form-item">
        <input type="password" placeholder="密 码 :  " lay-filter="userpwd" hover class="layui-input" id="userpwd"
               autocomplete="off"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="验证码 : " lay-filter="captcha" hover class="code layui-input layui-input-inline"
               id="captcha" autocomplete="off"/>
        <img id="code" src="./captcha" class="codeImage" onclick="change_captcha();"/>
    </div>
    <div class="layui-form-item">
        <button id="login" type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
            登 入
        </button>
    </div>

    <div style="position: fixed; bottom: 0; padding-left: 100px">
        <img src="https://mimg.127.net/p/images/logo/gonganlogo.png" alt="公安"
             style="position: relative;top: 4px;vertical-align: baseline;">
        <a href="https://beian.miit.gov.cn">粤ICP备2021082113号</a>
    </div>
</form>
<!-- 资 源 引 入 -->
<script src="../component/layui/layui.js"></script>
<script src="../component/pear/pear.js"></script>
<script>
    layui.use(['form', 'element', 'jquery', 'button', 'popup', 'layer'], function () {
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;
        var button = layui.button;
        var popup = layui.popup;
        var $ = layui.jquery;
        // 提交登录信息
        form.on('submit(login)', function (data) {
            //获取用户名
            username = $("#username").val()
            //获取密码
            userpwd = $("#userpwd").val()
            //获取验证码
            captcha = $("#captcha").val()
            if (username == "") {
                popup.failure("用户名不能为空!")
            } else if (userpwd == "") {
                popup.failure("密码不能为空!")
            } else if (captcha == "") {
                popup.failure("验证码不能为空!")
            } else {
                button.load({
                    elem: '.login',
                    time: 1500,
                    done: function () {
                        var data = JSON.stringify({"username": username, "userpwd": userpwd, "captcha": captcha});
                        $.ajax({
                            type: "POST",
                            url: "login",
                            data: data,
                            contentType: "application/json",
                            success: function (data) {
                                if (data.code == 200) {
                                    //登陆成功
                                    window.location.replace("./index/myindex")
                                } else {
                                    //登陆失败 提示错误信息 并清空密码和验证码输入框
                                    layer.msg(data.msg, function () {
                                        $("#userpwd").val("")
                                        $("#captcha").val("")
                                        change_captcha()
                                    });
                                }
                            }
                        });
                    }
                })
            }
            return false;
        });
        $('#captcha').keydown(function (e) {
            if (e.keyCode === 13) {
                $("#login").trigger("click");
            }
        });
    })

    function change_captcha() {
        layui.jquery("#code").attr('src', "./captcha?d=" + Math.random());
    }
</script>
</body>
</html>
